<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="70px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
    style="width: 280px"
  >
    <div style="font-size: 22px; text-align: center; margin-bottom: 50px">注册</div>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" clearable show-password />
    </el-form-item>

    <el-button type="success" @click="submitForm(ruleFormRef)" style="width: 100%"
      >注册</el-button
    >
    <el-divider>登录/注册</el-divider>
    <el-button type="warning" @click="GoLogin" style="width: 100%">登录</el-button>
  </el-form>
</template>

<script lang="ts" setup>
import router from "@/router";
import axios from "axios";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

interface RuleForm {
  username: string;
  password: string;
}
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: "",
  password: "",
});
const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: "请输入你的账号名称", trigger: "blur" },
    { min: 1, max: 25, message: "长度应<25", trigger: "blur" },
  ],
  password: [{ required: true, message: "请输入你的密码", trigger: "blur" }],
});

const createShop = () => {
  const token = localStorage.getItem("shop_auth_token");
  axios
    .get("/api/shop/insert", {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios
        .post("/api/auth/register", {
          username: ruleForm.username,
          password: ruleForm.password,
          role: "shop",
        })
        .then((res) => {
          console.log(res);
          if (res.data.success) {
            ElMessage({
              message: "注册成功",
              type: "success",
            });
            localStorage.setItem("shop_auth_token", res.data.message);
            createShop();
            setTimeout(() => {
              router.push("/");
            }, 800);
          } else {
            ElMessage({
              message: "注册失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });

      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

const GoLogin = () => {
  router.push("/auth/login");
};
</script>

<style lang="scss" scoped></style>
